<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F.img演示</title>
<style type="text/css">
#imgbox img{width:30px;height:30px;}
#numbox div{position:relative;width:30px;height:30px;float:left;}
</style>
<script type="text/javascript" src="../../1st.js"></script>
</head>
<body>
<div>图片数目：<span id="imgNum"></span></div>

<div id="imgbox"></div>
<div id="numbox"></div>
<div style="position:absolute; left:50%; top:50%; width:304px; height:50px; margin:-25px -152px;">
    <div style="position:absolute; left:0px; top:0px; width:300px; height:20px; border:2px solid blue;"></div>
    <div id="timebar" style="position:absolute; left:2px; top:2px; width:0px; height:20px; background-color:green;"></div>
    <div style="position:absolute; left:0px; top:30px; width:300px; height:20px;">加载进度: <span id="timeper">0%</span></div>
</div>

<script type="text/javascript">
var u = "http://www.likaituan.net/music/miniplayer/skin/";

function showImgList(imgs){
    F("imgNum").html(imgs.split(",").length);
    imgs = imgs.replace(/^|,/g,"$&"+u);
    var rnd = "?" + Math.random();
    imgs = imgs.replace(/,|$/g, rnd+"$&");
    
    var timebar = F("timebar");
    var timeper = F("timeper");
    var imgbox = F("imgbox");
    var numbox = F("numbox");
    var oneLoaded = function(idx, count, img){
        timebar.css("w",Math.floor(idx/count*300));
        timeper.html(Math.floor(idx/count*100) + "%");
        imgbox.append("img").src(img.src);
        numbox.append("div").html(idx);
    }
    
    var allLoaded = function(){
        alert("图片载入完毕");
    }
    
    F.loadImg(imgs, oneLoaded, allLoaded);
}
document.write('<script type="text/javascript" src="'+u+'getimglist.php"></scr'+'ipt>');
</script>
</body>
</html>